<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>编辑菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-form" lay-filter="sys-menu-form" id="sys-menu-form"  style="padding: 20px 0 0 0;">
  <input type="hidden" name="id" id="id">
  <div class="layui-form-item">
    <label class="layui-form-label">菜单名称</label>
    <div class="layui-input-inline">
      <input type="text" name="menuName" lay-verify="required" placeholder="请输入菜单名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">父级编号</label>
    <div class="layui-input-inline">
      <input id="parentId" name="parentId" type="hidden">
      <div id="parentName" lay-filter="parentName" class="xm-select-demo"></div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">请求地址</label>
    <div class="layui-input-inline">
      <input type="text" name="url" lay-verify="required" placeholder="请输入请求地址" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">菜单类型</label>
    <div class="layui-input-inline">
      <select lay-filter="menuType" name="menuType" id="menuType"></select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">菜单状态</label>
    <div class="layui-input-block" id="visible"></div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限标识</label>
    <div class="layui-input-inline">
      <input type="text" name="perms" placeholder="请输入权限标识" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">显示顺序</label>
    <div class="layui-input-inline">
      <input type="text" name="orderNum" lay-verify="required" placeholder="请输入显示顺序" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择图标</label>
    <div class="layui-input-inline">
      <input type="text" id="iconPicker" name="icon" lay-filter="iconPicker" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-inline">
      <input type="text" name="remark" placeholder="请输入备注" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
  </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:inline="javascript">
    let ctx = [[${#request.getContextPath()}]];
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','treeSelect','crud','iconPicker'], function(){
        let $ = layui.$
            ,treeSelect= layui.treeSelect
            ,crud = layui.crud
            ,iconPicker = layui.iconPicker
            ,form = layui.form
            ,sysMenu = [[${sysMenu}]];

        form.val('sys-menu-form', sysMenu);
        form.on('submit(save-submit)', function(data){
            $.ajax({
                type: 'POST',
                url:  ctx + '/sysMenu/edit',
                data: JSON.stringify(data.field),
                contentType:'application/json;charset=UTF-8',
                dataType: 'json',
                success: function(result) {
                    layer.msg(result.message);
                    if (result.code === 200) {
                        let index = parent.layer.getFrameIndex(window.name);
                        // 关闭
                        parent.layer.close(index);
                        // 刷新
                        parent.location.reload();
                    }
                }
            });
        });
        treeSelect.render({
            // 选择器
            elem: '#parentName',
            // 数据
            data: ctx + '/sysMenu/treeSelect',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请输入父级编号',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(d){
                $("#parentId").val(d.current.id);
                $("#parentName").val(d.current.name);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
                if (sysMenu.parentId !== 0) {
                    treeSelect.checkNode('parentName', sysMenu.parentId);
                    treeSelect.refresh('parentName');
                }
            }
        });
        crud.setSelect("menuType","menuType",sysMenu.menuType);
        crud.setRadio("visible","enabled",sysMenu.visible);

        iconPicker.render({
          // 选择器，推荐使用input
          elem: '#iconPicker',
          // 数据类型：fontClass/unicode，推荐使用fontClass
          type: 'fontClass',
          // 是否开启搜索：true/false
          search: true,
          // 是否开启分页
          page: true,
          // 每页显示数量，默认12
          limit: 12,
          // 点击回调
          click: function (data) {
            $("#iconPicker").val(data.icon);
          }
        });
    })
</script>
</body>
</html>